<template>
  <div>

    <div class="main-carousel">
      <Carousel autoplay v-model="Carousel.value">
        <Carousel-item v-for="item in Carousel.items" :key="item.id" >
          <div class="demo-carousel">
            <img alt="" :src="item.url">
          </div>
        </Carousel-item>
      </Carousel>
    </div>

    <div class="main-personal">
      <H2Box :content="Peronal.title" :tag="Peronal.subTitle"></H2Box>
      <H3Box :content="Peronal.childTitle"></H3Box>
      <div class="main-personal-item1">
        <PersonalBox v-for="item in Peronal.items" :key="item.id" :content="item.title" :tag="item.index" :isshow="item.isShow" :src="item.src" :leftSrc="Peronal.personalLeftSrc"></PersonalBox>
      </div>
    </div>

    <div class="main-business">
      <div class="business-box" name="business">
        <H2Box :content="Business.title" :tag="Business.subTitle"></H2Box>
        <div class="main-business-item1">
          <BusinessBox v-for="item in Business.items" :key="item.id" :src="item.src">
            <ul slot="content">
              <li v-for="cItem in item.items" :key="cItem">{{ cItem }}</li>
            </ul>
          </BusinessBox>
        </div>
        <H3Box :content="Business.case.title"></H3Box>
        <div class="main-business-item2">
          <CaseBox v-for="item in Business.case.items" :key="item.id" :src="item.src" :content="item.title">
          </CaseBox>
        </div>
      </div>
    </div>

    <div class="main-wechat">
      <div class="wexin-box" name="wexin">
        <H2Box :content="Wechat.title" :tag="Wechat.subTitle"></H2Box>
        <div class="main-wechat-item1">
          <WechatBox v-for="item in Wechat.items" :key="item.id" :src="item.src" :href="item.href" :content="item.title" :desc="item.description"></WechatBox>
        </div>
        <H3Box :content="Business.case.title"></H3Box>
        <div class="main-wechat-item2">
          <CaseBox v-for="item in Wechat.case.items" :key="item.id" :src="item.src" :content="item.title">
          </CaseBox>
        </div>
      </div>
    </div>

    <div class="main-app">
      <div class="main-app-item1" name="app">
        <H2Box :content="Website.title" :tag="Website.subTitle" :color='Website.color'></H2Box>
        <div>
          <img src="../assets/app/app02.png" alt="" />
        </div>
      </div>
      <div class="main-app-item2">
        <AppBox :content="Website.about.title">
          <ul slot="panel">
            <li>
              <i class="ivu-icon ivu-icon-ios-telephone"></i>&nbsp;&nbsp;
              <span>{{ Website.about.telphone }}</span>
            </li>
            <li>
              <Icon type="ios-chatbubble"></Icon>&nbsp;&nbsp;<span>{{ Website.about.qq }}</span>
            </li>
            <li>
              <Icon type="ios-location"></Icon>&nbsp;&nbsp;<span>{{ Website.about.address }}</span>
            </li>
          </ul>
        </AppBox>
        <AppBox :content="Website.wechat.title">
          <img slot="panel" :src="Website.wechat.wechatSrc" />
        </AppBox>
      </div>

    </div>

  </div>
</template>

<script>
import * as components from './Home/index'

import { home as dataModels } from '@/datas'

export default {
  data () {
    return dataModels
  },
  components: components
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-carousel {
  height: 400px;
}

.main-personal {
  /* height: 350px;*/
  background: #f4f6f5;
  text-align: center;
}

.main-personal-item1 {
  padding: 0 auto;
  overflow: hidden;
}

.main-business {
  /* height: 700px; */
  text-align: center;
}

.main-business-item1 {
  padding: 0 auto;
  overflow: hidden;
}

.main-business-item2 {
  padding: 0 auto;
  overflow: hidden;
}


.main-wechat {
  /* height: 700px; */
  background: #f4f6f5;
  text-align: center;
  overflow: hidden;
}

.main-wechat-item1 {
  padding: 0 auto;
  overflow: hidden;
}

.main-wechat-item2 {
  padding: 0 auto;
  overflow: hidden;
}


.main-app {
  /* height: 415px; */
  background: #383838;
  text-align: center;
  overflow: hidden;
}

.main-app-item1 {
  height: 300px;
  background: #4c7997 url(../assets/app/app01.png);
}

.main-app-item2 {
  padding: 0 auto;
  overflow: hidden;
}

.demo-carousel {
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  background: #000000;
}

.demo-carousel img {
  height: 400px;
}


@media screen and (max-width: 600px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .main-carousel {
    display: none;
  }
}

</style>
